<template>
    <customDialogVue :data="dialog" @close="onCloseDialog">
        <template #content>
            <div class="operate-contaier">
                <div class="operate-common">
                    <ul>
                        <li>
                            <span>公司名称：</span>
                            <p>{{ data.orderInformation.companyName }}</p>
                        </li>
                        <li>
                            <span>手机号码：</span>
                            <p>{{ data.orderInformation.phone }}</p>
                        </li>
                        <li>
                            <span>充值金额：</span>
                            <p>{{ data.orderInformation.totalStoreAmount }}元</p>
                        </li>
                        <li>
                            <span>赠送次数：</span>
                            <p>{{ data.orderInformation.totalFreeCount ?? 0 }}次</p>
                        </li>
                        <li>
                            <span>使用次数：</span>
                            <p>{{ data.orderInformation.usedFreeCount ?? 0 }}次（含赠送）</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 查看 -->
            <section class="lookVue" v-if="dialog.isLook">
                <div class="upload-credentials-container">
                    <!-- <ul class="p1">
                        <li>操作人：{{ data.orderInformation.optUser }}</li>
                        <li>操作时间：{{ data.orderInformation.optTime }}</li>
                    </ul> -->
                    <div class="line"></div>
                    <ul>
                        <li style="width: 100%">
                            退款原因：{{ refundOptions[data.orderInformation.refundReason - 1]?.label ?? '' }}
                        </li>
                    </ul>
                    <!-- <ul>
                        <li style="width: 100%">备注：{{ data.orderInformation.description }}</li>
                    </ul> -->
                    <ul class="p2">
                        <li>收款开户行网点：{{ data.orderInformation.branches }}</li>
                        <li>收款银行卡号：{{ data.orderInformation.bankAccount }}</li>
                    </ul>
                    <ul class="p2">
                        <li>收款银行：{{ data.orderInformation.brank }}</li>
                        <li>
                            退款金额：￥<i>{{ data.orderInformation.refundAmount }}</i
                            >元
                        </li>
                    </ul>
                    <p class="p1">
                        实际退款金额：￥<i>{{ data.orderInformation.refundAmount }}</i>
                        元（存在使用赠送次数，退款则需要按照单价折算后退剩余金额）
                    </p>
                </div>
            </section>
            <!-- 审核 -->
            <section class="refundVue" v-else>
                <el-form
                    ref="ruleFormRef"
                    :model="data.refundData"
                    :rules="data.rules"
                    label-width="200px"
                    style="width: 100%; display: flex; flex-wrap: wrap"
                >
                    <el-form-item label="退款原因：" prop="cause" style="width: 100%">
                        <div class="refund-input">
                            <el-select v-model="data.refundData.cause" style="width: 100%" placeholder="请选择退款原因">
                                <el-option
                                    v-for="item in refundOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="备注：" prop="remark" style="width: 100%">
                        <div class="refund-input">
                            <el-input
                                type="textarea"
                                :rows="4"
                                v-model="data.refundData.remark"
                                placeholder="备注说明"
                            ></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="收款银行卡号：" prop="card" style="width: 100%">
                        <div class="refund-input">
                            <el-input v-model="data.refundData.card" placeholder="请输入收款银行卡号"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="收款银行：" prop="bank" style="width: 100%">
                        <div class="refund-input">
                            <el-input v-model="data.refundData.bank" placeholder="请输入收款银行"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="收款开户行网点：" prop="branch" style="width: 100%">
                        <div class="refund-input">
                            <el-input v-model="data.refundData.branch" placeholder="请输入收款开户行网点"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="收款人姓名：" prop="name" style="width: 100%">
                        <div class="refund-input">
                            <el-input v-model="data.refundData.name" placeholder="请输入收款人姓名"></el-input>
                        </div>
                    </el-form-item>
                </el-form>
                <div class="refund-money">
                    <p>预估退款金额：</p>
                    <span
                        >￥<i>{{ data.refundData.refundMoney }}</i
                        >元
                    </span>
                    （退款金额=充值金额-使用次数*单价）
                </div>
                <div class="btn">
                    <el-button type="primary" @click="onRefundConfirm(ruleFormRef)">确定</el-button>
                    <el-button @click="onRefundCancel">取消</el-button>
                </div>
            </section>
        </template>
    </customDialogVue>
</template>
<script setup lang="ts">
import { reactive, watchEffect, ref } from 'vue'
import { OperateDialog } from '.'
import customDialogVue from '@/components/baseDialog/Index.vue'
import { ElMessage, FormInstance } from 'element-plus'
import { refundApprove } from '@/apis/finance/refund'
import { refundOptions } from '@/apis/finance/pay'
/**
 * 接受父组件传递的参数
 */
const prop = defineProps(['data'])

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['visible'])

/**
 * 表单from
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 点击确定按钮
 */
const onRefundConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            refundApprove({
                refundId: data.orderInformation.id,
                companyId: data.orderInformation.companyId,
                refundReason: Number(data.refundData.cause),
                brank: data.refundData.bank,
                description: data.refundData.remark,
                bankAccount: data.refundData.card,
                branches: data.refundData.branch,
                receiverName: data.refundData.name
            }).then(res => {
                if (res.data.value === 200) {
                    ElMessage.success('操作成功！')
                    onRefundCancel()
                }
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}

/**
 * 点击取消按钮
 */
const onRefundCancel = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    emits('visible')
}

/**
 * 定义弹窗变量
 */
const dialog = reactive({
    visible: true,
    title: '定义弹窗变量',
    width: '752px',
    storeRefundId: '',
    type: 1,
    isLook: false,
    id: ''
})

/**
 * 初始化数据
 */
const data = reactive(new OperateDialog(''))

/**
 * 监听传递参数变化
 */
watchEffect(() => {
    dialog.visible = prop.data.visible
    dialog.title = prop.data.title
    dialog.type = prop.data.type
    dialog.isLook = prop.data.type === 1 ? false : true
    if (dialog.visible) {
        dialog.id = prop.data.data.id ?? ''
        dialog.storeRefundId = prop.data.data.storeRefundId
        data.getRefundDetailedById(prop.data.data)
        console.log('prop.data', prop.data)
    }
})

/**
 * 监听关闭弹窗
 */
const onCloseDialog = () => {
    emits('visible')
}
</script>
<style scoped lang="scss">
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
        position: relative;
        padding-left: 8px;
        color: var(--color-black);

        &::before {
            content: '';
            width: 2px;
            height: 16px;
            background-color: var(--color-black);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
}

.operate-common {
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 33.33%;
            margin-bottom: 8px;
            display: flex;
            span {
                width: 75px;
            }
            p {
                width: calc(100% - 75px);
            }
        }
    }
}
.refundVue {
    .refund-input {
        width: 400px;
    }
    .refund-money {
        display: flex;
        p {
            width: 200px;
            text-align: right;
            box-sizing: border-box;
            padding-right: 12px;
        }
        span {
            font-weight: bold;
            i {
                color: var(--color-danger);
            }
        }
    }
    .btn {
        display: flex;
        justify-content: center;
        margin: 32px 0 16px 0;
    }
}
.upload-credentials-container {
    ul {
        display: flex;
        li {
            width: 33.33%;
            margin-bottom: 14px;
        }
    }
    p {
        margin: 4px 0 14px 0;
        font-weight: bold;
    }
    .line {
        width: 100%;
        height: 1px;
        background-color: #f2f2f2;
        margin: 0 0 14px 0;
    }
    .p1 {
        color: rgba(153, 153, 153, 0.88);
    }
    .p2 {
        li {
            width: 50%;
        }
    }
}
</style>
